Documentation

Le main wrapper est utile dans le cas où une page a une hauteur moins importante que la hauteur de l'écran.

Pour l'utilisation, il faut englober votre contenu avec la "main-wrapper" sauf le header et le footer

Preview

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat nunc, semper nec augue eu, egestas tempor magna. Aenean quis elit in urna tincidunt pharetra. Phasellus convallis urna suscipit mi feugiat, at venenatis sem gravida. Integer aliquet a lectus eleifend feugiat. Pellentesque accumsan quam ac risus lacinia, vitae sodales ligula fermentum. Sed aliquet ex id augue finibus, vitae commodo lorem fringilla. Ut et volutpat arcu. Nunc quis tincidunt neque. Phasellus luctus sodales ipsum id sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In ut velit at justo fringilla consequat eu at nibh. Donec rhoncus dapibus eleifend. Vestibulum at luctus est. Proin quis leo eu nunc tempor blandit.

Suspendisse tincidunt sem nec tempor auctor. Cras sed hendrerit nisi. Aenean dapibus velit nec risus porttitor, ut aliquet libero sollicitudin. Sed pellentesque ac augue ut blandit. Nulla sed dictum metus, et blandit nunc. Mauris in maximus nisl. Donec hendrerit egestas leo, in vehicula risus volutpat eu. Fusce tempus vehicula ligula, eu porta turpis varius a. Donec ut ligula sit amet erat bibendum aliquam a vitae enim. Morbi ultrices congue ante nec tincidunt. Fusce at tincidunt purus, in lacinia risus. Morbi vitae tortor quis turpis cursus varius nec vitae sem. Mauris mattis turpis id turpis lacinia lacinia. Sed blandit nunc ut justo semper, ac ultrices arcu gravida. Proin iaculis rhoncus dolor, ac rhoncus purus consequat ut.

Donec rhoncus, erat eu ultrices luctus, quam tortor facilisis nibh, eget fermentum purus lacus et dolor. Suspendisse bibendum sed ipsum eu volutpat. In iaculis gravida risus sed aliquam. Duis gravida imperdiet arcu. Vivamus commodo ac ante at efficitur. Cras id urna a mi placerat ultrices et vel lacus. Maecenas mi nisi, tincidunt et pretium id, placerat non turpis. Suspendisse aliquet quam vitae urna sagittis pulvinar. Praesent urna tellus, ornare hendrerit blandit nec, viverra ac tortor. Cras ac dignissim metus. Nullam lacinia at justo venenatis maximus. Suspendisse placerat ex non ullamcorper tempus. Fusce condimentum libero et elementum accumsan.

Integer sit amet augue eleifend nibh tempor vestibulum. Nullam eu efficitur lacus, vehicula fringilla leo. Praesent interdum, diam id lacinia blandit, dui neque fringilla sapien, vitae cursus augue augue eu ligula. Duis id sapien luctus, finibus nisl id, varius odio. Vestibulum maximus magna id leo accumsan maximus. Sed fermentum enim vel neque convallis viverra. Phasellus facilisis, velit non faucibus feugiat, nibh lectus dignissim lorem, quis rutrum augue augue congue arcu. Suspendisse facilisis quam eget commodo tristique. Morbi at libero vel felis tincidunt ultrices. Phasellus varius dolor quis dictum ultrices.

Balisage


                
                    <main style="min-height: 100vh">
                        <header>Header</header>
                        <div class="main-wrapper">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat nunc, semper nec augue eu, egestas tempor magna. Aenean quis elit in urna tincidunt pharetra. Phasellus convallis urna suscipit mi feugiat, at venenatis sem gravida. Integer aliquet a lectus eleifend feugiat. Pellentesque accumsan quam ac risus lacinia, vitae sodales ligula fermentum. Sed aliquet ex id augue finibus, vitae commodo lorem fringilla. Ut et volutpat arcu. Nunc quis tincidunt neque. Phasellus luctus sodales ipsum id sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In ut velit at justo fringilla consequat eu at nibh. Donec rhoncus dapibus eleifend. Vestibulum at luctus est. Proin quis leo eu nunc tempor blandit.</p>
                            <p>Suspendisse tincidunt sem nec tempor auctor. Cras sed hendrerit nisi. Aenean dapibus velit nec risus porttitor, ut aliquet libero sollicitudin. Sed pellentesque ac augue ut blandit. Nulla sed dictum metus, et blandit nunc. Mauris in maximus nisl. Donec hendrerit egestas leo, in vehicula risus volutpat eu. Fusce tempus vehicula ligula, eu porta turpis varius a. Donec ut ligula sit amet erat bibendum aliquam a vitae enim. Morbi ultrices congue ante nec tincidunt. Fusce at tincidunt purus, in lacinia risus. Morbi vitae tortor quis turpis cursus varius nec vitae sem. Mauris mattis turpis id turpis lacinia lacinia. Sed blandit nunc ut justo semper, ac ultrices arcu gravida. Proin iaculis rhoncus dolor, ac rhoncus purus consequat ut.</p>
                            <p>Donec rhoncus, erat eu ultrices luctus, quam tortor facilisis nibh, eget fermentum purus lacus et dolor. Suspendisse bibendum sed ipsum eu volutpat. In iaculis gravida risus sed aliquam. Duis gravida imperdiet arcu. Vivamus commodo ac ante at efficitur. Cras id urna a mi placerat ultrices et vel lacus. Maecenas mi nisi, tincidunt et pretium id, placerat non turpis. Suspendisse aliquet quam vitae urna sagittis pulvinar. Praesent urna tellus, ornare hendrerit blandit nec, viverra ac tortor. Cras ac dignissim metus. Nullam lacinia at justo venenatis maximus. Suspendisse placerat ex non ullamcorper tempus. Fusce condimentum libero et elementum accumsan.</p>
                            <p>Integer sit amet augue eleifend nibh tempor vestibulum. Nullam eu efficitur lacus, vehicula fringilla leo. Praesent interdum, diam id lacinia blandit, dui neque fringilla sapien, vitae cursus augue augue eu ligula. Duis id sapien luctus, finibus nisl id, varius odio. Vestibulum maximus magna id leo accumsan maximus. Sed fermentum enim vel neque convallis viverra. Phasellus facilisis, velit non faucibus feugiat, nibh lectus dignissim lorem, quis rutrum augue augue congue arcu. Suspendisse facilisis quam eget commodo tristique. Morbi at libero vel felis tincidunt ultrices. Phasellus varius dolor quis dictum ultrices.</p>
                        </div>
                        <footer>Footer</footer>
                    </main>